<div class="container">

  <!-- Main hero unit for a primary marketing message or call to action -->
  <div class="hero-unit">
    <h1><%= role.name %></h1>
  </div>

  <div class="row">
    <div id="properties">
      <% if (role.imageUrl) { %>
      <img class="roleImg" src="<%= role.imageUrl %>">
      <% } else { %>
      <img class="roleImg" src="/img/azure-role.png">
      <% } %>
      <br />
      <% if (role.description) { %>
      <p class="indexDescription"><%= role.description %></p>
      <% } else { %>
      <p class="indexDescription">No description.</p>
      <% } %>
    </div>

    <div class="form-actions">
      <a class="btn" href="/editRole/<%= role.name %>">Edit</a>
    </div>

    <h2>Instances</h2>
    <% for (var instance in role.instances) { %>
    <div class="instance">
      <h3><%= role.instances[instance].id %></h3>
      
      <table class="table">
        <thead>
          <tr>
            <th>Fault domain</th>
            <th>Update domain</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><%= role.instances[instance].faultDomain %></td>
            <td><%= role.instances[instance].updateDomain %></td>
          </tr>
        </tbody>
      </table>

      <h3>Endpoints</h3>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Protocol</th>
            <th>Address</th>
            <th>Port</th>
          </tr>
        </thead>
        <tbody>
          <% for (var endpoint in role.instances[instance].endpoints) { %>
          <tr>
            <td><%= role.instances[instance].endpoints[endpoint].name %></td>
            <td><%= role.instances[instance].endpoints[endpoint].protocol %></td>
            <td><%= role.instances[instance].endpoints[endpoint].address %></td>
            <td><%= role.instances[instance].endpoints[endpoint].port %></td>
          </tr>
          <% } %>
        </tbody>
      </table>
    </div>
    <% } %>
  </div>

  <div class="form-actions">
    <a class="btn backBtn" href="/">Back</a>
  </div>
</div> <!-- /container -->